<template>
    <div>
        <div class="ant-transfer" filtered-items="">
            <div class="ant-transfer-list" style="width: 45%;">
                <div class="ant-transfer-list-header">
                    <span class="ant-transfer-list-header-selected">
                        <span>{{ rowFeatures.length }} 项</span>
                        <span class="ant-transfer-list-header-title">行因子</span>
                    </span>
                </div>

                <div class="ant-transfer-list-body">
                    <div v-if="rowFeatures.length === 0" class="ant-transfer-list-body-not-found">
                        <div  class="ant-empty ant-empty-normal ant-empty-small">
                            <div class="ant-empty-image">
                                <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
                                    <g transform="translate(0 1)" fill="none" fillRule="evenodd">
                                    <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
                                    <g fillRule="nonzero" stroke="#D9D9D9">
                                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
                                    </g></g>
                                </svg>
                            </div>
                            <p class="ant-empty-description">无数据</p>
                        </div>
                    </div>
                    <feature-item
                        :itemList="rowFeatures"
                        @onSelect="onSelectedRowFeatureChange"
                        @onDeleteItem="onDeleteRowFeature"
                        @onMoveUp="onMoveRowFeatureUp"
                        @onMoveDown="onMoveRowFeatureDown"
                    />
                </div>
            </div>
            <div class="ant-transfer-operation">
                <button :disabled="selectedRowFeatures.length <= 0" @click="moveRight" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only">
                    <i aria-label="icon: right" class="anticon anticon-right">
                    <svg
                    viewBox="64 64 896 896"
                    data-icon="right"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class="">
                        <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
                    </svg>
                    </i>
                </button>
                <!-- disabled="disabled" -->
                <button :disabled="selectedColFeatures.length <= 0" @click="moveLeft" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only">
                    <i aria-label="icon: left" class="anticon anticon-left">
                    <svg
                    viewBox="64 64 896 896"
                    data-icon="left"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class="">
                        <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
                    </svg>
                    </i>
                </button>
            </div>
            <div class="ant-transfer-list" style="width: 45%;">
            <div class="ant-transfer-list-header">
                <span class="ant-transfer-list-header-selected">
                    <span>{{ colFeatures.length }} 项</span>
                    <span class="ant-transfer-list-header-title">列因子</span>
                </span>
            </div>
            <div class="ant-transfer-list-body">
                <div v-if="colFeatures.length === 0" class="ant-transfer-list-body-not-found">
                    <div class="ant-empty ant-empty-normal ant-empty-small">
                        <div class="ant-empty-image">
                            <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
                                <g transform="translate(0 1)" fill="none" fillRule="evenodd">
                                    <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
                                    <g fillRule="nonzero" stroke="#D9D9D9">
                                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <p class="ant-empty-description">无数据</p>
                    </div>
                </div>
                <feature-item
                    :itemList="colFeatures"
                    @onSelect="onSelectedColFeatureChange"
                    @onDeleteItem="onDeleteColumnFeature"
                    @onMoveUp="onMoveColumnFeatureUp"
                    @onMoveDown="onMoveColumnFeatureDown"
                />
            </div>
            </div>
        </div>
    </div>
</template>

<script>
import FeatureItem from './FeatureItem'

// const data = [
//     { 'key': '1', 'title': '王一' },
//     { 'key': '2', 'title': '刘二' },
//     { 'key': '3', 'title': '张三' },
//     { 'key': '4', 'title': '吴四' },
//     { 'key': '5', 'title': '陈五' },
//     { 'key': '6', 'title': '田六' },
//     { 'key': '7', 'title': '李七' },
//     { 'key': '8', 'title': '辛八' }
// ]

const rightList = [
]

export default {
    props: ['rowFeatures'],
    components: {
        FeatureItem
    },
    name: 'FeatureCombine',
    data () {
      return {
        // rowFeatures: data,
        colFeatures: rightList,

        selectedRowFeatures: [],
        selectedColFeatures: []
      }
    },
    methods: {
        onFeatureUpdate: function () {
            const rfs = this.rowFeatures.map(v => v.key)
            const cfs = this.colFeatures.map(v => v.key)

            const model = {
                rowFeature: rfs,
                colFeature: cfs
            }

            this.$emit('onFeatureUpdate', model)
        },
        onSelectedRowFeatureChange: function (event) {
            if (event.checked) {
                this.selectedRowFeatures.push(event.key)
            } else {
                const idx = this.selectedRowFeatures.indexOf(event.key)
                this.selectedRowFeatures.splice(idx, 1)
            }
        },
        onSelectedColFeatureChange: function (event) {
            if (event.checked) {
                this.selectedColFeatures.push(event.key)
            } else {
                const idx = this.selectedColFeatures.indexOf(event.key)
                this.selectedColFeatures.splice(idx, 1)
            }
        },

        moveRight: function () {
            const target = this.rowFeatures.filter(v => {
                return this.selectedRowFeatures.indexOf(v.key) !== -1
            })

            target.forEach(v => {
                this.colFeatures.push(v)

                // 左边的项目要删除掉
                const index = this.rowFeatures.findIndex(q => q.key === v.key)
                this.rowFeatures.splice(index, 1)
            })

            // 选中的项目清空掉
            this.selectedRowFeatures = []

            this.onFeatureUpdate()
        },

        moveLeft: function () {
            const target = this.colFeatures.filter(v => {
                return this.selectedColFeatures.indexOf(v.key) !== -1
            })

            target.forEach(v => {
                this.rowFeatures.push(v)

                // 左边的项目要删除掉
                const index = this.colFeatures.findIndex(q => q.key === v.key)
                this.colFeatures.splice(index, 1)
            })

            // 选中的项目清空掉
            this.selectedColFeatures = []

            this.onFeatureUpdate()
        },

        onMoveColumnFeatureDown: function (item) {
            const index = this.colFeatures.findIndex(v => v.key === item.key)
            if (index === -1 || index === this.colFeatures.length - 1) {
                return
            }

            const swap = this.colFeatures[index]
            const prev = this.colFeatures[index + 1]
            this.colFeatures[index] = prev

            // 这里通过$set方式给原始数据列表赋值,才可以刷新交互页面,以下同
            this.$set(this.colFeatures, index + 1, swap)

            this.onFeatureUpdate()
        },

        onMoveColumnFeatureUp: function (item) {
            const index = this.colFeatures.findIndex(v => v.key === item.key)
            if (index === -1 || index === 0) {
                return
            }

            const swap = this.colFeatures[index]
            const prev = this.colFeatures[index - 1]
            this.colFeatures[index] = prev

            this.$set(this.colFeatures, index - 1, swap)

            this.onFeatureUpdate()
        },

        onDeleteColumnFeature: function (item) {
            const index = this.colFeatures.findIndex(v => v.key === item.key)
            this.colFeatures.splice(index, 1)

            this.onFeatureUpdate()
        },

        onMoveRowFeatureDown: function (item) {
            const index = this.rowFeatures.findIndex(v => v.key === item.key)
            if (index === -1 || index === this.rowFeatures.length - 1) {
                return
            }

            const swap = this.rowFeatures[index]
            const prev = this.rowFeatures[index + 1]
            this.rowFeatures[index] = prev

            this.$set(this.rowFeatures, index + 1, swap)

            this.onFeatureUpdate()
        },

        onMoveRowFeatureUp: function (item) {
            const index = this.rowFeatures.findIndex(v => v.key === item.key)
            if (index === -1 || index === 0) {
                return
            }

            const swap = this.rowFeatures[index]
            const prev = this.rowFeatures[index - 1]
            this.rowFeatures[index] = prev

            this.$set(this.rowFeatures, index - 1, swap)

            this.onFeatureUpdate()
        },

        onDeleteRowFeature: function (item) {
            const index = this.rowFeatures.findIndex(v => v.key === item.key)
            this.rowFeatures.splice(index, 1)

            this.onFeatureUpdate()
        }
    }
}
</script>

<style>

.LazyLoad{
    width: 100%;
}

</style>
